<template>
  <view class="box">
    <view class="img">
      <u-swiper :list="newArticle.img" @click="click" radius="10" indicator="true" height="300px" :autoplay="false"
        bgColor="#eee"></u-swiper>
    </view>
    <uni-popup ref="popup" type="center" mask-background-color=rgba(0,0,0,0.8)>
      <view class="popup1" @longpress="save">
        <u-swiper :list="newArticle.img" indicator="true" :autoplay="false" bgColor="transparent" imgMode="aspectFit"
          height="750rpx">
        </u-swiper>
      </view>
    </uni-popup>
    <view class="card">
      <h2>{{newArticle.title}}</h2>
      <h1>
        <u-tag text="所属分类"></u-tag>
        <p>{{newArticle.class}}</p>
      </h1>
      <h1>
        <u-tag text="联系微信"></u-tag>
        <p>{{newArticle.contact}}</p>
      </h1>
      <h1>
        <u-tag text="发布时间"></u-tag>
        <p>{{newArticle.time}}</p>
      </h1>
      <view class="avaTitle">
        <view>
          <image :src="newArticle.userAva" class="avatar"></image>
          <span>{{newArticle.userName}}</span>
        </view>
      </view>
    </view>
    <!-- 评论区 -->
    <view class="reply">
      <u-search placeholder="想说点什么吗" v-model="comment" shape="square" :showAction="false" searchIcon="edit-pen-fill"
        @search="submit">
      </u-search>
    </view>
    <view class="comment">
      <view class="comment-one" v-for="(item,index) in newArticle.comment" :key="index" @click="showTrue(index)">
        <view class="avaName">
          <img :src="item.avatar" alt="">
          <span>{{item.nickName}}</span>
        </view>
        <view class="commentNR">
          <p>{{item.comment}}</p>
        </view>
        <view class="commentDate">
          <p>{{item.time}}</p>
          <view class="good">
            <u-icon name="thumb-up" :label="item.good" labelSize="12px" labelColor="#aaa"></u-icon>
          </view>
        </view>
        <view class="more" v-if="item.moreComment.length > 0" @click.stop="toComment(item)">
          <p>共{{item.moreComment.length}}条回复<u-icon name="arrow-right" color="#09f"></u-icon>
          </p>
        </view>
      </view>
    </view>
    <!-- 底部栏 -->
    <view class="btn">
      <view class="btn1" v-if="!isCollection">
        <u-button type="success" text="添加收藏" icon="star" shape="circle" @click="collectionAdd"></u-button>
      </view>
      <view class="btn1" v-else>
        <u-button type="success" text="取消收藏" icon="star-fill" shape="circle" @click="collectionDel"></u-button>
      </view>
      <view class="btn1">
        <u-button type="primary" text="一键复制微信" icon="order" shape="circle" @click="copy"></u-button>
      </view>
    </view>
    <!-- 弹出层 -->
    <u-popup :show="show" @close="show = false" mode="center">
      <view class="popup-input">
        <u-search placeholder="回复内容" v-model="keyword" shape="square" :showAction="false" searchIcon="edit-pen-fill"
          @search="commentChildren">
        </u-search>
      </view>
    </u-popup>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isCollection: false,
        count: '',
        index: 0,
        show: false,
        keyword: '',
        time: '',
        comment: '',
        newArticle: {},
      }
    },
    // 分享给朋友
    onShareAppMessage() {
      return {
        title: '你的朋友给你分享了一个玩具'
      }
    },
    // 分享到朋友圈
    onShareTimeline() {
      return {
        title: '你的朋友给你分享了一个玩具'
      }
    },
    // 组件加载时
    async onLoad(option) {
      // 取得主页传过来的id,并去后台请求该数据的最新数据
      let content = JSON.parse(option.article)
      await uniCloud.callFunction({
        name: "articleSearch",
        data: {
          _id: content._id
        },
        success: (res) => {
          this.newArticle = res.result[0]
        }
      })
      // 判断当前内容是否收藏,如果用户未登录，则不需要判断
      if (this.$store.state.nickName) {
        await uniCloud.callFunction({
          name: "userSearch",
          data: {
            openid: this.$store.state.openid
          },
          success: (res) => {
            if (res.result.data[0].collection.indexOf(content._id) != -1) {
              this.isCollection = true
            }
          }
        })
      }
    },
    methods: {
      // 转跳当前评论
      toComment(item) {
        uni.navigateTo({
          url: "/pages/comment/comment?comment=" + JSON.stringify(item)
        })
      },
      // 查找数据
      getArticle() {
        uniCloud.callFunction({
          name: "articleSearch",
          data: {
            _id: this.newArticle._id
          },
          success: (res) => {
            this.newArticle = res.result[0]
          }
        })
      },
      // 回复评论开关
      showTrue(index) {
        if (this.$store.state.nickName) {
          this.show = true
          this.index = index
        } else {
          this.$refs.uToast.error('回复评论前请先登录哦')
        }
      },
      // 点击轮播图时，弹出大图模式
      click() {
        this.$refs.popup.open()
      },
      // 一键复制微信号
      copy() {
        uni.setClipboardData({
          data: this.newArticle.contact,
          success: () => {
            uni.showToast({
              title: '复制成功'
            })
          }
        })
      },
      // 添加收藏
      collectionAdd() {
        if (!this.$store.state.nickName) {
          this.$refs.uToast.error('请先登录再收藏')
        } else {
          uniCloud.callFunction({
            name: "collection",
            data: {
              openid: this.$store.state.openid,
              code: 1,
              _id: this.newArticle._id
            },
            success: (res) => {
              this.$refs.uToast.success('收藏成功')
              this.isCollection = true
            }
          })
        }
      },
      // 取消收藏
      collectionDel() {
        uniCloud.callFunction({
          name: "collection",
          data: {
            openid: this.$store.state.openid,
            code: 2,
            _id: this.newArticle._id
          },
          success: (res) => {
            this.$refs.uToast.success('已取消收藏')
            this.isCollection = false
          }
        })
      },
      // 获取当前时间
      getTimer() {
        let time = new Date()
        time = uni.$u.timeFormat(time, 'mm-dd hh:MM')
        this.time = time
      },
      // 发表评论
      submit() {
        if (this.$store.state.nickName) {
          this.getTimer()
          this.newArticle.comment.unshift({
            comment: this.comment,
            openid: this.$store.state.openid,
            nickName: this.$store.state.nickName,
            avatar: this.$store.state.avatarUrl,
            time: this.time,
            good: 0,
            moreComment: []
          })
          this.comment = ''
          uniCloud.callFunction({
            name: "comment",
            data: this.newArticle,
            success: (res) => {
              this.$refs.uToast.success('发表成功')
              this.getArticle()
            }
          })
        } else {
          this.$refs.uToast.error('发表评论前请先登录哦')
        }
      },
      // 回复已有的评论
      commentChildren() {
        this.getTimer()
        this.newArticle.comment[this.index].moreComment.unshift({
          comment: this.keyword,
          openid: this.$store.state.openid,
          nickName: this.$store.state.nickName,
          avatar: this.$store.state.avatarUrl,
          time: this.time
        })
        this.keyword = ''
        this.show = false
        uniCloud.callFunction({
          name: "commentChildren",
          data: {
            newArticle: this.newArticle,
            index: this.index
          },
          success: (res) => {
            this.$refs.uToast.success('回复成功')
            this.getArticle()
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .img {
    width: 90%;
    margin: 20px;
  }

  .popup1 {
    margin-top: -100px;
    width: 750rpx;
    height: 750rpx;
  }

  .card {
    font-family: 'Microsoft YaHei';
    width: 95%;
    margin: 0 10px 30px;
    background-color: #fff;
    border-radius: 10px;
    padding-bottom: 5px;
    box-shadow: 0 1px 5px #ccc;

    h1 {
      display: flex;
      align-items: center;
      padding: 10px 10px;
      margin: 10px 0;

      p {
        margin-left: 10px;
      }
    }

    h2 {
      font-size: 20px;
      font-weight: 700;
      padding: 20px 20px 0;
    }
  }

  .btn {
    display: flex;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 87px;
    // margin: 0 10px;
    background-color: #fff;
    // border-radius: 10px;

    .btn1 {
      width: 45%;
      margin: 15px 20px;

    }
  }

  .avaTitle {
    box-sizing: border-box;
    padding: 5px;
    width: 47%;
    margin: 0px 5px 10px;

    image {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      vertical-align: middle;
    }

    span {
      font-family: 'Microsoft YaHei';
      margin-left: 5px;
      font-size: 14px;
      vertical-align: middle;
    }
  }

  .reply {
    padding: 10px 20px;
    background-color: #fff;
  }

  .comment {
    width: 100%;
    height: auto;
    padding-bottom: 100px;

    .comment-one {
      padding-top: 10px;
      border-bottom: 1px solid #ccc;
      background-color: #fff;
    }

    .avaName {
      overflow: hidden;
      margin: 0 10px;

      img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        vertical-align: middle;
      }

      span {
        font-size: 14px;
        margin-left: 10px;
        vertical-align: middle;
      }
    }

    .commentNR {
      margin: 0 20px 10px 50px;
      word-break: break-all;
    }

    .commentDate {
      display: flex;
      justify-content: space-between;

      p {
        font-size: 12px;
        color: #aaa;
        margin: 0 0 10px 50px;
      }

      .good {
        float: left;
        width: 50px;
      }
    }

    .more {
      margin: 0 0 10px 50px;

      p {
        width: 100px;
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        padding: 0 5px;
        font-size: 14px;
        background-color: #eee;
        color: #09f;
        border-radius: 2px;
      }
    }
  }

  .popup-input {
    width: 750rpx;
    margin: 15px;
  }
</style>
